<template>
	<view class="com indexaction-com">
		<view class="search-panel">
			<input class="search-input" v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search" />
			<text class="iconfont" @click="search">&#xe602;</text>
		</view>
		<view>
			<view class="page-action-list" @click="jumpTab('/pages/index/index')">
				<image class="page-action-bg" :src="$fileUrl+'page-demand.png'" mode="widthFix"></image>
				<view>创新需求</view>
			</view>
			<view class="page-action-list" @click="jump('/pages/index/ach')">
				<image class="page-action-bg" :src="$fileUrl+'page-ach.png'" mode="widthFix"></image>
				<view>成果直通车</view>
			</view>
			<view class="page-action-list" @click="jumpTab('/pages/community/index')">
				<image class="page-action-bg" :src="$fileUrl+'page-community.png'" mode="widthFix"></image>
				<view>社区</view>
			</view>
			<view class="page-action-list" @click="jumpTab('/pages/talent/index')">
				<image class="page-action-bg" :src="$fileUrl+'page-talent.png'" mode="widthFix"></image>
				<view>人才库</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	const emit = defineEmits(["search"])
	const keywords = ref('')
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const jumpTab = (url : string) => {
		uni.switchTab({ url: url })
	}
	const search=()=>{
		emit('search', keywords.value)
	}
</script>

<style lang="scss">
	.indexaction-com {
		background-color: #fff;
		padding: 20rpx 0 50rpx 0;

		.search-panel {
			background: #FFFFFF;
			box-shadow: 0px 8rpx 16rpx 0px rgba(47, 101, 243, 0.1);
			display: flex;
			align-items: center;
			height: 86rpx;
			border-radius: 86rpx;
			width: 690rpx;
			margin: 0 auto;
			padding: 25rpx;
			transform: translateY(-34px);
			font-size: 30rpx;

			.iconfont {
				margin-right: 20rpx;
			}

			.search-input {
				flex-grow: 1;
			}
		}

		.page-action-list {
			width: 25%;
			display: inline-block;
			text-align: center;
			font-size: 24rpx;
		}

		.page-action-bg {
			width: 90rpx;
			height: 90rpx;
		}
	}
</style>